<template>
  <view class="page">
    <view class="weather">
      <image
        class="weather-pic"
        :src="require('@/static/img/weather-pic.png')"
        mode="widthFix"
      />
    </view>
    <view class="main">
      <view class="card">
        <view class="card-title">物联网监控保证产地养分充足，且不被污染</view>
        <view class="card-info">
          <view class="card-info-title">
            <view>农场气象站</view>
            <view class="card-info-desc">晴（白天）</view>
          </view>
          <view class="card-info-time">
            <view class="card-info-line"></view>
            <view class="card-info-time-text">1分钟前更新</view>
            <view class="card-info-line"></view>
          </view>
          <view class="card-info-data">
            <view
              class="card-info-data-item"
              v-for="(item, index) in 6"
              :key="index"
            >
              <view>
                <view class="card-info-text1">空气湿度</view>
                <view class="card-info-text2">单位：℃</view>
              </view>
              <view class="card-info-text3">24℃</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  onLoad() {},
  methods: {},
};
</script>

<style lang="scss" scoped>
.page {
  min-height: 100vh;
}
.weather {
  background: #f6f6f6;
  text-align: center;
  padding: 40rpx 0;
  &-pic {
    width: 690rpx;
  }
}
.main {
  position: relative;
  background: #fff;
  border-radius: 14rpx 14rpx 0px 0px;
  top: -14rpx;
  padding: 0 18rpx;
  .card {
    &-title {
      font-size: 26rpx;
      font-weight: bold;
      color: #ba78c3;
      padding: 18rpx 0;
      text-align: center;
    }
    &-info {
      min-height: 501rpx;
      background: #ffffff;
      border-radius: 14rpx;
      border: 2rpx solid #e7e7e7;
      padding: 16rpx 18rpx;
      &-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 32rpx;
        font-weight: bold;
        color: #202020;
        margin-bottom: 12rpx;
      }
      &-desc {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 168rpx;
        height: 53rpx;
        background: #1ac678;
        border-radius: 26rpx;
        font-size: 21rpx;
        color: #ffffff;
      }
      &-time {
        display: flex;
        align-items: center;
        font-size: 21rpx;
        font-weight: 400;
        color: #999999;
        margin-bottom: 16rpx;
        &-text {
          padding: 0 12rpx;
        }
      }
      &-line {
        flex: 1;
        height: 0px;
        opacity: 1;
        border: 2rpx solid #e9e9e9;
      }
      &-data {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        &-item {
          width: 333rpx;
          height: 112rpx;
          padding: 18rpx 23rpx;
          margin-bottom: 7rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;
          background: #e6f2fe;
          border-radius: 7rpx;
          opacity: 1;
        }
      }
      &-text1 {
        font-size: 26rpx;
        font-weight: bold;
        color: #202020;
        margin-bottom: 10rpx;
      }
      &-text2 {
        font-size: 21rpx;
        font-weight: 400;
        color: #999999;
      }
      &-text3 {
        font-size: 32rpx;
        font-weight: bold;
        color: #1ac678;
      }
    }
  }
}
</style>
